<template>
  <div class="editMaterial">
    <div style="display: flex">
      <jc-button
        :btn-arr="['save', 'sub', 'reload', 'pass', 'list']"
        :list="'/processList'"
        @refresh="queryWorkshopDetail"
        @save="preserve"
        @audit="audit(1)"
        @noAudit="audit(2)"
        @submit="preserve(1)"
        @noSubmit="proSubmit(2)"
      />
      <el-button style="margin-left: 10px" size="mini" type="primary" @click="billPrivce">同步价格</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="process" label-width="120px" :rules="proRules">
          <el-form-item :label="$t('market.documentstatus')">
            <el-tag :type="process.stateColor">{{ process.fdocumentstatus }}</el-tag>
          </el-form-item>
          <el-form-item :label="$t('market.deaprt')" prop="fdeptId">
            <el-select v-model.trim="process.fdeptId" size="mini" @change="selectGroup('1')" :disabled="isDisabled">
              <el-option
                v-for="item in workshopDept"
                :key="item.fdeptId"
                :label="item.scbm"
                :value="item.fdeptId"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.tranches')" prop="groupId">
            <el-select v-model.trim="process.groupId" size="mini" @change="queryWorkshopDetail('1')" :disabled="isDisabled">
              <el-option
                v-for="item in groupDetail"
                :key="item.groupId"
                :label="item.groupName"
                :value="item.groupId"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.trancheSeq')" prop="fseq">
            <el-input-number v-model.number="process.fseq" controls-position="right" size="mini" :disabled="isDisabled" />
          </el-form-item>
          <el-form-item :label="$t('market.flaborcosts')" prop="flaborcosts">
            <el-input-number v-model.number="process.flaborcosts" controls-position="right" size="mini" :disabled="isDisabled" />
          </el-form-item>
          <el-form-item :label="$t('market.createDate')" prop="fcreatetime">
            <el-input v-model.trim="process.fcreatetime" size="mini" disabled />
          </el-form-item>
        </el-form>
        <div class="header-name">
          <el-button class="newBtn" style="margin-bottom: 5px;" size="mini" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <div class="searchclas" v-if="$route.query.groupId">
            <el-input v-model="searData.fprocessnumber" placeholder="工序编码" />
            <el-input v-model="searData.fprocessname" placeholder="工序名称" />
            <el-input v-model="searData.fremark" placeholder="备注" />
            <el-button
              type="primary"
              size="mini"
              @click="processData"
            >
              {{ $t('btn.search') }}
            </el-button>
          </div>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeard"
          :table-height="tableHeight"
          serial
          @rowClick="techClick"
        >
          <!--工序名称-->
          <template v-slot:tagSlot="col">
            <el-input
              v-model="col.scope.row.fprocessname"
              :disabled="isDisabled"
              size="mini"
            />
          </template>
          <!--价格-->
          <template v-slot:billSlot="col">
            <el-input-number
              v-model.number="col.scope.row.fprice"
              :disabled="isDisabled"
              size="mini"
            />
          </template>
          <!--价格-->
          <template v-slot:btnStates="col">
            <el-input-number
              v-model.number="col.scope.row.flaborst"
              :disabled="isDisabled"
              size="mini"
            />
          </template>
          <!--备注-->
          <template v-slot:btnState="col">
            <el-input
              v-model="col.scope.row.fremark"
              :disabled="isDisabled"
              size="mini"
            />
          </template>
          <!--操作-->
          <template v-slot:btnSlot="col">
            <el-button
              type="danger"
              size="mini"
              :disabled="isDisabled"
              @click="proDelect(col.scope.$index)"
            >{{ $t('shop.delete') }}</el-button>
          </template>
        </jc-table>
        <jc-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="processData"
        />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.other')" name="journal">
        <jc-table
          :table-data="journalData"
          :table-header="journalHeard"
          :table-height="tableHeight1"
          serial
        />
        <jc-pagination
          v-show="journal.total > 0"
          :total="journal.total"
          :page.sync="journal.pageNum"
          :limit.sync="journal.pageSize"
          @pagination="journalLog"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  queryWorkshopDept,
  queryWorkshopGroup,
  queryWorkshopGroupInfo,
  updateWorkshopGroupDetailsTemp,
  updateWorkshopGroupDetailsConfirm,
  notSubmitWorkshopGroup,
  queryWorkshopGroupDetailList,
  reviewWorkshopGroup,
  notReviewWorkshopGroup,
  queryWorkshopGroupLog, synLaborExpenses
} from '@/api/processLibrary'
import { toMxBmina } from '@/components/ToMxamineState'
import jcButton from '@/components/Button'

export default {
  components: {
    jcButton
  },
  data() {
    return {
      fbillNo: 'fprocessname', // 工序名称
      activeName: 'first',
      active: 'first',
      isDisabled: false,
      process: {
        fnumber: '',
        fdeptId: '',
        groupId: '',
        fseq: '',
        fcreatetime: '',
        fdocumentstatus: ''
      },
      searData: {
        fprocessname: '',
        fprocessnumber: '',
        fremark: ''
      },
      workshopDept: [], // 部门
      groupDetail: [], // 组别
      seleceVisiblit: false, // 仓库
      indexSelf: 0,
      indexSelf1: 0,
      tableHeight: '60vh',
      tableHeight1: '70vh',
      tableData: [],
      delArr: [],
      total: 0, // 总条目
      pageNum: 1, // 当前页
      pageSize: 200, // 每页显示多少条数据
      tableHeard: [
        { label: this.$t('market.processname'), prop: 'fprocessnumber', minWidth: '120px' },
        { label: this.$t('market.processnumber'), type: 'tag', prop: 'fprocessname', minWidth: '120px' },
        { label: this.$t('market.workingHours'), type: 'states', prop: 'flaborst', minWidth: '120px' },
        { label: this.$t('shop.price'), type: 'bill', prop: 'fprice', minWidth: '120px' },
        { label: this.$t('market.note'), type: 'state', prop: 'fremark', minWidth: '120px' },
        { label: this.$t('market.handle'), type: 'btn' }
      ],
      journal: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      journalData: [],
      journalHeard: [
        { label: this.$t('market.operator'), prop: 'fname' },
        { label: this.$t('market.deaprt'), prop: 'fdeaprt' },
        { label: this.$t('market.describe'), prop: 'fdescribe' },
        { label: this.$t('market.ipSite'), prop: 'fip' },
        { label: this.$t('market.date1'), prop: 'createDate' }
      ],
      proRules: {
        fdeptId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ], groupId: [
          { required: true, message: '请选择组别', trigger: 'change' }
        ], fseq: [
          { required: true, message: '请输入优先级', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.queryWorkshop()
    if (this.$route.query.groupId) {
      this.queryWorkshopDetail() // 表头
    }
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 300px)' : '60vh'
    this.tableHeight1 = window.innerWidth > 1440 ? 'calc(100vh - 260px)' : '70vh'
  },
  methods: {
    // 点击获取日志
    handleClick(tab) {
      if (tab.name === 'journal') {
        this.journalLog()
      }
    },
    // 获取日志
    journalLog() {
      const DATA = {
        ...this.journal,
        fgroupId: this.process.groupId || this.$route.query.groupId
      }
      queryWorkshopGroupLog(DATA).then(res => {
        if (res.code === 0) {
          this.journalData = res.data.list
          this.journal.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 詳情
    queryWorkshopDetail(ev) {
      const DATA = {
        groupId: this.process.groupId || this.$route.query.groupId
      }
      queryWorkshopGroupInfo(DATA).then(res => {
        if (res.code === 0) {
          this.process = toMxBmina(res.data)
          this.process.groupId = this.process.fid
          this.isDisabled = this.process.fdocumentstatus === this.$t('market.state1') || this.process.fdocumentstatus === this.$t('market.state2')
          this.processData() // 列表
          if (ev !== '1') {
            this.selectGroup('1')
          }
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 列表数据
    processData() {
      const DATA = {
        groupId: this.process.groupId || this.$route.query.groupId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searData
      }
      queryWorkshopGroupDetailList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.tableData.map((item, index) => {
            item.fseq = index
          })
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 搜索
    processear() {
      this.pageNum = 1
      this.processData()
    },
    // 部门
    queryWorkshop() {
      const DATA = {
        fuserId: window.sessionStorage.getItem('fuserId')
      }
      queryWorkshopDept(DATA).then(res => {
        if (res.code === 0) {
          this.workshopDept = res.data.list
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 根据生产部门查询对应组别
    selectGroup(ev) {
      const DATA = {
        pageSize: 100,
        pageNum: 1,
        fdeptId: this.process.fdeptId
      }
      queryWorkshopGroup(DATA).then(res => {
        if (res.code === 0) {
          this.groupDetail = res.data.list
          // this.process.groupId = this.groupDetail[0].groupId
          if (ev !== '1') {
            this.process.groupId = ''
          } else {
            this.processData() // 列表
          }
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 保存
    preserve(ev) {
      const DATA = {
        fgroupId: this.process.groupId,
        fdeptId: this.process.fdeptId,
        fseq: this.process.fseq,
        flaborcosts: this.process.flaborcosts,
        delArr: this.delArr,
        list: this.tableData
      }
      for (const item of this.tableData) {
        if (!item.fprocessname) {
          this.$message.warning('工序名称不能为空！')
          return
        }
      }
      this.$refs.purchaseRef.validate((valid) => {
        if (valid) {
          updateWorkshopGroupDetailsTemp(DATA).then(res => {
            if (res.code === 0) {
              ev === 1 ? this.proSubmit(1) : this.queryWorkshopDetail()
              this.delArr = []
              this.$message({ showClose: true, message: res.message, type: 'success' })
            } else {
              this.$message({
                type: 'error',
                dangerouslyUseHTMLString: true,
                message: res.message
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 公共函数
    toExamineFun(api) {
      const DATA = { Numbers: [this.process.groupId + ''] }
      api(DATA).then(res => {
        if (res.code !== 0) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          return
        }
        this.queryWorkshopDetail()
        this.innerHTM = ''
        res.data.forEach(res => {
          this.innerHTM += '<div>' + res + '</div>'
        })
        this.$notify.warning({
          title: '提示',
          message: this.innerHTM,
          duration: 3000, offset: 50,
          dangerouslyUseHTMLString: true
        })
      })
    },
    // 提交
    proSubmit(ev) {
      const api = ev === 1 ? updateWorkshopGroupDetailsConfirm : notSubmitWorkshopGroup
      this.toExamineFun(api)
    },
    // 审核
    audit(ev) {
      const api = ev === 1 ? reviewWorkshopGroup : notReviewWorkshopGroup
      this.toExamineFun(api)
    },
    // 同步价格
    billPrivce() {
      const DATA = {
        fid: this.process.fid,
        price: this.process.flaborcosts
      }
      this.$confirm('确定要同步价格么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        synLaborExpenses(DATA).then(res => {
          if (res.code === 0) {
            this.queryWorkshopDetail()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 点击表格行，获取下标
    techClick(row) {
      this.indexSelf1 = row.fseq
    },
    // 新增行
    newHang() {
      const data = {
        fprocessname: '',
        fprice: 1,
        flaborst: 1,
        fremark: ''
      }
      this.tableData.unshift(data)
      this.tableData.map((item, index) => {
        item.fseq = index
      })
    },
    // 刪除
    proDelect(index) {
      const item = this.tableData[index]
      if (item.fid) {
        this.delArr.push(item.fid)
        this.tableData.splice(index, 1)
      } else {
        this.tableData.splice(index, 1)
      }
    },
    newZeng() {
      this.$router.push({ path: '/processDetail' })
    }
  }
}
</script>
<style lang="scss" scope>
.editMaterial {
  @include listBom;
  .searchclas {
    display: flex;
    margin-left: 10px;
    .el-input {
      width: 168px;
      margin-right: 10px;
    }
  }
  .el-tabs {
    .header-name {
      display: flex;
      position: relative;
      margin-top: 10px;
      margin-bottom: 5px;
    }
    .el-form {
      display: flex;
      flex-wrap: wrap;
      .el-input .el-input__inner {
        height: 30px;
        line-height: 30px;
      }
      .el-form-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 35px;
        width: 275px;
        margin-bottom: 0;
        .btnType {
          margin-right: 5px;
        }

        .el-date-editor.el-input {
          width: 100% !important;
        }

        .el-select {
          width: 100%;
        }
      }
    }
  }
}
</style>
